<template>
  <div
    v-if="srcList.length > 0"
    :style="{ width, height, 'border-radius': radius }"
    class="!flex !items-center !justify-center"
  >
    <el-image
      v-for="(item, i) in srcList"
      :key="i"
      :src="item"
      :preview-src-list="srcList"
      class="mx-1"
      preview-teleported
      fit="cover"
      :initial-index="i"
    />
  </div>
  <div
    v-else
    class="!flex !items-center !justify-center bg-slate-200"
    :style="{ width, height, 'border-radius': radius }"
  >
    <el-icon :size="size">
      <icon-picture />
    </el-icon>
  </div>
</template>

<script setup>
import { Picture as IconPicture } from "@element-plus/icons-vue";
import { getKeyList } from "@pureadmin/utils";
import { ref, watch } from "vue";

defineOptions({
  name: "ImageViewer"
});

// 传值
const props = defineProps({
  src: String,
  width: {
    type: [String, Number],
    default: "100%"
  },
  height: {
    type: [String, Number],
    default: "100%"
  },
  radius: {
    type: String,
    default: "0"
  },
  size: {
    type: [String, Number],
    default: "14"
  },
  showCount: {
    type: [String, Number],
    default: "1"
  }
});

// const picurl = localStorage.getItem("picurl");
const picurl = "https://xinmanrui.com/eduWebSiteApi";
const srcList = ref([]);

watch(
  () => props.src,
  newValue => {
    if (!newValue) return false;

    if (typeof newValue == "string") {
      let result = JSON.parse(newValue);
      if (result.length > props.showCount) {
        result = result.slice(0, props.showCount);
      }
      result.forEach(item => {
        item.fileUrl = picurl + item.fileUrl;
      });

      srcList.value = getKeyList(result, "fileUrl");
    }
  },
  { immediate: true }
);
</script>

<style lang="scss" scoped></style>
